<template>
    <div class="add_goods_new">
        <el-drawer
                :title="titie"
                :visible.sync="drawer"
                :direction="direction"
                :before-close="handleClose">

            <div class="add_box_input">
                <div class="title_value">商品信息：</div>
                    <p style="padding-right: 5px;font-size: 14px;">
                        <span class="symbol">*</span> 商品名字：<el-input placeholder="请输入商品名字" v-model="name" clearable></el-input>
                        <br/><br/>
                        <span class="symbol">*</span> 单价：<el-input placeholder="请输入内容" v-model="pice" clearable></el-input>
                        <br/><br/>
                        <span class="symbol">*</span> 库存：<el-input placeholder="库存" type="number" v-model="stock" clearable></el-input>
                        <br/><br/>
                        详情：  <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="details"
                            maxlength="30"
                            show-word-limit
                    >
                    </el-input>
                    </p>
                <div class="title_value">上传文件：
                    <el-upload
                            ref="upload"
                            class="upload-demo"
                            drag
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :http-request="uploadVideo"
                            multiple
                            :limit="1"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg、png文件，且不超过10mb</div>
                    </el-upload>
                </div>

                <div style="float: right;padding-right: 10px;">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="change" v-if="checkSubmit">修改</el-button>
                    <el-button type="primary" @click="submit" v-else>确定</el-button>
                </div>
            </div>

        </el-drawer>
    </div>
</template>

<script>
    import OSS from 'ali-oss'
    import {newGoodsAddApi, newGoodsChangeApi} from '@/api/backstage/newGoods'
    export default {
        name: "addGoodsNew",
        data() {
            return {
                titie:'新增商品',
                checkSubmit:0,
                drawer: false,
                direction: 'rtl',
                name:'',
                pice:'',
                stock:'',
                details:'',
                imgUrl:'',
                uploadConf: {
                    region: null,
                    accessKeyId: null,
                    accessKeySecret: null,
                    bucket: null,
                    stsToken: null
                },
                changId:''
            };
        },
        methods: {
            submit(){
                let row = {
                    "goods_name":this.name,
                    "pice":this.pice,
                    "goods_stock":this.stock,
                    "details":this.details,
                    "img_url":this.imgUrl
                }
                if (this.name !=='' && this.pice !=='' && this.stock !=='')
                {
                        //    最新商品添加
                        newGoodsAddApi(row).then(() =>{
                            this.name ='';this.pice='';this.stock='';this.details='';this.imgUrl='';
                            this.$message({type: 'success', message: '添加成功!'});
                            this.$refs.upload.clearFiles();
                            this.$parent.selectListNew();
                            this.drawer = false;
                        });
                }else{
                    this.$message({type: 'info', message: '请填写完整!'});
                }
            },
            change(){
                let row = {
                    "id":this.changId,
                    "goods_name":this.name,
                    "pice":this.pice,
                    "goods_stock":this.stock,
                    "details":this.details,
                    "img_url":this.imgUrl
                }
                if (this.name !=='' && this.pice !=='' && this.stock !=='')
                {
                    //    最新商品修改
                    newGoodsChangeApi(row).then(() =>{
                        this.name ='';this.pice='';this.stock='';this.details='';this.imgUrl='';
                        this.$message({type: 'success', message: '修改成功!'});
                        this.$refs.upload.clearFiles();
                        this.$parent.selectListNew();
                        this.drawer = false;
                    });
                }else{
                    this.$message({type: 'info', message: '请填写完整!'});
                }
            },
            handleClose() {
                this.$confirm('确认关闭？')
                    .then(() => {
                        this.drawer = false
                    })
            },
            openDrawer(row,index){
                if (index){
                    this.titie = '商品详情';
                        this.name = row.goods_name;
                        this.pice = row.pice;
                        this.stock = row.goods_stock;
                        this.details = row.details;
                        this.changId = row.id;
                        this.imgUrl = row.img_url;
                        this.checkSubmit = index
                }else {
                    this.titie = '新增商品';
                    this.name = '';
                    this.pice = '';
                    this.stock = '';
                    this.details = '';
                    this.imgUrl = '';
                    this.checkSubmit=0;
                }
                this.drawer = true;
            },
            async uploadVideo(options){
                console.log(options.file.name);
                let fileName = options.file.name.lastIndexOf(".");//获取到文件名开始到最后一个“.”的长度。
                let fileNameLength = options.file.name.length;//获取到文件名长度
                let fileFormat = options.file.name.substring(fileName + 1, fileNameLength);//截取后缀名
                const client = new OSS({
                    region: 'oss-cn-chengdu',
                    accessKeyId: 'LTAI4G7xLwyqhsbHHEr77sDa',
                    accessKeySecret: 'tXuM1SF5aD04od2pFOXDbJupsZ1M2q',
                    bucket: 'yangshen520'
                });
                let name = Date.now()+'.' + fileFormat;
                let url ="https://yangshen520.oss-cn-chengdu.aliyuncs.com/" + name;
                try {
                    await client.put(name, options.file,(res)=>{
                        console.log(res);
                    });
                    console.log(url);
                } catch (e) {
                    this.$message.error('上传失败')
                }
                this.imgUrl = url
            }
        }
    }
</script>

<style lang="scss" scoped>
.add_goods_new{
    /deep/.el-drawer__header{
        font-size: 20px !important;
        color: #000c17;
        font-weight: bold;
    }
    /deep/.el-drawer{
        width: 30% !important;
    }
    /deep/.el-upload-dragger{
        height: 100px !important;
        .el-icon-upload{
            margin-top: 10px;
            font-size: 50px;
        }
        .el-upload__text{
            margin-top: -10px;
        }
    }
    .add_box_input{
        margin-left: 20px;
        .title_value{
            font-size: 16px;
            font-weight: bold;
        }
        .symbol{
            font-weight: bold;
            color: red;
        }
    }
}
</style>
